<template>
  <div class="app-container">
    <div class="calendarMain" v-loading="PageLoading" style="overflow-y: auto">
      <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;">城市模板
        <el-button-group class="filter-item" style="margin-left:30px;">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="fetchData"
          >
            刷新
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="create"
          >
            新增城市模板
          </el-button>
        </el-button-group>

      </h3>

      <div class="week-main" v-for="(item,idx) in list">
        <el-descriptions :title="item.star_time" direction="vertical" :column="4" border style="margin-top:10px;">
          <el-descriptions-item label="访问链接" style="max-width: 200px">
            <p>短链：<a :href="`https://wz.mala.cn/t/${item.urltoken}`" style="color:#369" target="_blank">wz.mala.cn/t/{{ item.urltoken }}</a>
            </p>
            <el-tag style="cursor: pointer" @click="copy('https://wz.mala.cn/t/'+item.urltoken)">点击复制</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="标题、城市/负责人">
            {{ item.title }}
            <br>
            <el-tag>{{ item.p_content }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="二维码">
            <span class="img" :id="`qrCode${idx}`" ref="qrCodeDiv"></span>
          </el-descriptions-item>
          <el-descriptions-item label="操作">
            <el-button type="primary" round @click="edit(item.id)">编辑</el-button>
            <el-button type="danger" round @click="del(item.id)">删除</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="pagedata"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getCity,delTopicForm } from '@/api/wz'
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      PageLoading: true,
      list: [],
      total: 0,
      dateParms: {
        limit: 10,
        page: 1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    create() {
      this.$router.push({ path: '/form/addcity' })
    },
    edit(id) {
      this.$router.push({ path: '/form/addcity', query: { id: id } })
    },
    go(id) {
      if (id == 4) {
        this.$router.push({ path: '/form/form-view', query: { form_id: id } })
      } else {
        this.$router.push({ path: '/form/form-view', query: { form_id: id } })
      }

    },
    copy(url) {
      let _t = this
      _t.$copyText(url).then(
        function(e) {
          //成功
          _t.$message({
            message: '复制成功',
            type: 'success'
          })
        },
        function(e) {
          _t.$message({
            message: '失败' + e,
            type: 'error'
          })
        }
      )
    },
    pagedata(val) {
      this.dateParms.page = val
      this.fetchData()
    },
    del(id) {
      this.PageLoading = true
      delTopicForm({ id:id }).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.fetchData()
      })
    },
    fetchData() {
      this.PageLoading = true
      let that = this
      getCity(this.dateParms).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.PageLoading = false
        this.dateParms.page = response.data.current_page
        this.$nextTick(function() {
          response.data.data.forEach((item, index) => {
            that.$refs.qrCodeDiv[index].innerHTML = ''
            let qrcode = new QRCode(that.$refs.qrCodeDiv[index], {
              text: 'https://wz.mala.cn/t/' + item.urltoken,
              width: 400,
              height: 400,
              colorDark: '#333333', //二维码颜色
              colorLight: '#ffffff', //二维码背景色
              correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
            })
          })
        })
      }, data => {
        this.PageLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.img {
  img {
    width: 100px;
  }
}
</style>
